<template>
	<base-page class="base-form" title="报名列表" @back="onCancel()">
		<!-- 过滤组件 -->
		<view class="filter-box">
			<filter-box :sortList="sortList" :hasFilter="true" @refresh="onRefresh" @reset="onReset"
				@sort-change="onTableSortChange">
				<u-row :gutter="0">
					<u-col :span="12">
						<select-filter label="审核标记" v-model="formFilter.statusFilter"
							:dataList="MobileFormApplyInfo.statusFilterWidget.dropdownList" />
					</u-col>
				</u-row>
			</filter-box>
		</view>
		<view class="main-box" style="padding: 0rpx 32rpx">
			<!-- 列表组件 -->
			<view class="content-box">
				<custom-list ref="cardList" :isLoading="tableWidget.loading" :finished="tableWidget.finished"
					:dataList="tableWidget.dataList" @load="tableWidget.loadDataList">
					<image-card customClass="list-item" v-for="(data ,index) in tableWidget.dataList" :key="index"
						:data="data" :imageInfo="{
              show: true,
              src: getCardImageUrl(data),
              imageAlign: 'center',
              imagePosition: 'left',
              fit: 'fill',
              width: '100px',
              height: '100px',
              round: false,
              radius: '0px'
            }" @click="onClick(data)">
						<u-row gutter="0">
							<u-col :span="12">
								<field-label label="姓名" :required="false">
									<text class="input-label">{{ data.name }}</text>
								</field-label>
							</u-col>
							<u-col :span="12">
								<field-select label="班级" prop="StudentInfo.classId" v-model="data.classId"
									:multiple="false" :dataList="MobileFormApplyInfo.classIdWidget.dropdownList"
									:required="false" :disabled="false" />
							</u-col>
						</u-row>
					</image-card>
				</custom-list>
			</view>
		</view>
	</base-page>
</template>

<script>
	import rules from '@/utils/validate';
	import {
		stringCase,
		treeDataTranslate,
		findItemFromList,
		findTreeNodePath,
		findTreeNode,
		showConfirm,
		showMessage
	} from '@/utils';
	import {
		uploadMixin,
		statsDateRangeMixin
	} from '@/utils/mixins';
	import {
		DropdownWidget,
		TableWidget,
		UploadWidget,
		ChartWidget
	} from '@/utils/widget.js';
	import {
		SysUserController,
		SchoolInfoController,
		ClassInfoController,
		StudentInfoController,
		DictionaryController
	} from '@/api';

	export default {
		name: 'mobileFormApplyInfo',
		props: {
			subPage: {
				type: [Number, String, Boolean],
				default: 0
			}
		},
		mixins: [uploadMixin, statsDateRangeMixin],
		data() {
			return {
				tableWidget: new TableWidget(this.loadApplyInfoWidgetData, this.loadApplyInfoVerify, true),
				formFilter: {
					statusFilter: this.parseParams(this.Status.WAIT, 'integer'),
				},
				formFilterCopy: {
					statusFilter: this.parseParams(this.Status.WAIT, 'integer'),
				},
				MobileFormApplyInfo: {
					// 审核标记组件
					statusFilterWidget: new DropdownWidget(this.loadStatusFilterDropdownList, true, 'id', 'parentId'),
					isInit: false
				},
				// 表格过滤字段
				sortList: []
			};
		},
		methods: {
			parseParams(value, type = 'string') {
				if (value == null) return value;
				switch (type) {
					case 'integer':
						return Number.parseInt(value);
					case 'float':
						return Number.parseFloat(value);
					case 'boolean':
						return value === 'true' || value;
					default:
						return String(value);
				}
			},
			onCancel() {
				uni.navigateBack();
			},
			onRefresh() {
				this.$refs.cardList.reset();
			},
			/**
			 * 重置过滤值
			 */
			resetMobileFormApplyInfo() {
				this.formFilter.statusFilter = undefined;
				this.formFilterCopy.statusFilter = undefined;
			},
			/**
			 * 重置所有过滤值
			 */
			resetFilter() {
				this.resetMobileFormApplyInfo();
			},
			onReset() {
				this.resetFilter();
				this.onRefresh();
			},
			refreshMobileFormApplyInfo() {
				this.onRefresh();
			},
			/**
			 * 查询列表数据获取函数，返回Promise
			 */
			loadApplyInfoWidgetData(params) {
				if (params == null) params = {};
				params = {
					...params,
				};
				return new Promise((resolve, reject) => {
					StudentInfoController.list(this, params).then(res => {
						resolve({
							dataList: res.dataList,
							totalCount: res.totalCount
						});
					}).catch(e => {
						reject(e);
					});
				});
			},
			/**
			 * 查询列表数据获取检测函数，返回true正常获取数据，返回false停止获取数据
			 */
			loadApplyInfoVerify() {
				this.formFilterCopy.statusFilter = this.formFilter.statusFilter;
				return true;
			},
			/**
			 * 排序改变
			 */
			onTableSortChange(sortInfo) {
				this.tableWidget.onSortChange(sortInfo);
				this.onRefresh();
			},
			/**
			 * 获取卡片图片地址
			 */
			getCardImageUrl(row) {
				let params = {
					id: row.id,
					fieldName: 'photograph',
					asImage: true
				};
				let fileList = this.parseUploadData(row.photograph, params);
				if (Array.isArray(fileList) && fileList.length > 0) {
					return fileList[0].url;
				}
				return '';
			},
			/**
			 * 审核标记下拉数据获取函数
			 */
			loadStatusFilterDropdownList() {
				return Promise.resolve(this.Status.getList());
			},
			formInit() {
				this.MobileFormApplyInfo.statusFilterWidget.onVisibleChange(true).catch(e => {});
			}
		},
		mounted() {
			// 初始化页面数据
			this.formInit();
			this.onRefresh();
		}
	}
</script>

<style scoped>
	.sort-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.sort-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.sort-item+.sort-item {
		margin-left: 8px;
	}

	.nav-icon {
		display: inline;
	}

	.nav-icon+.nav-icon {
		margin-left: 5px;
	}
</style>